<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
	<title>漂流瓶</title>
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<style>
		.content-class {
			width: 640px;
			margin: 60px auto;
		}
	</style>
</head>
<body>
  <div id="app">
    <el-form class="content-class" ref="form" :model="form" label-width="120px">
			<el-form-item label="漂流瓶主人">
				<el-input v-model="form.owner"></el-input>
			</el-form-item>
			<el-form-item label="漂流瓶类型">
				<el-radio-group v-model="form.type">
					<el-radio label="male" value="male"></el-radio>
					<el-radio label="female" value="female"></el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="漂流瓶内容">
				<el-input type="textarea" v-model="form.content"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">立即创建</el-button>
			</el-form-item>
		</el-form>
  </div>
</body>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return { 
					form: {
						owner: '',
						type: 'male',
						content: '',
					}
				 }
      },
			methods: {
				onSubmit() {
					if (this.form.owner) {
						axios.post('/createUser', {
							...this.form,
							time: Date.now(),
						}).then(res => {
							this.$message({
								message: '恭喜你，数据创建成功',
								type: 'success'
							});
						})
					} else {
						this.$message.error('错了哦，请输入漂流瓶主人');
					}
				}
			}
    })
  </script>
</html>